<template>
	<view class="car-list">
		<view class="header-nav">
			<view class="tabs">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
			<view class="search">
				<uni-easyinput prefixIcon="search" @confirm="searchQuery" type="text" confirmType="search"
					v-model="params.value" placeholder="请输入vin搜索" @iconClick="iconClick" @clear="clearQuery">
				</uni-easyinput>
			</view>

		</view>

		<view class="uni-padding-wrap content">
			<view v-if="current === 0 && list.length">
				<carList :item="item" v-for="item in list" :key="item.id" :name="name" @tap="navigator(item.id)"></carList>
			</view>
			<Empty style="height: 100%;" v-if="current === 0 && !list.length"></Empty>

			<view v-if="current === 1 && olist.length">
				<carList :item="item" v-for="item in list" :key="item.id" :name="name"></carList>
			</view>
			<Empty style="height: 100%;" v-if="current === 1 && !olist.length" ></Empty>
		</view>
	</view>
</template>

<script>
	import {
		getJCINIT,
		getJCList
	} from '@/api/app.js'
	import carList from '@/components/testCar/index.vue'
	import Empty from '@/components/empty/index.vue'
	export default {
		components: {
			carList,
			Empty
		},
		data() {
			return {
				current: 0,
				items: ['待检测', '已完结'],
				styleType: 'button',
				activeColor: '#409Eff',
				params: {},
				list: [],
				list2: [],
				id: '',
				name: '',
				olist: [],
				olist2: []
			}
		},
		onShow() {
			this.id = uni.getStorageSync('id')
			this.name = uni.getStorageSync('name')
			this.init()
		},
		methods: {
			navigator(id){
				uni.navigateTo({
					url:`/pages/testCar/test?id=${id}`
				})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			async init() {
				let res = await getJCINIT({
					id: this.id
				})
				if (res.code == 0) {
					this.list = []
					this.list2 = []
				} else {
					this.list = res.data
					this.list2 = res.data
				}

				let ores = await getJCList({
					id: this.id
				})
				if (ores.code == 0) {
					this.olist = []
					this.olist2 = []
				} else {
					this.olist = ores.data
					this.olist2 = ores.data
				}
			},
			iconClick(val) {
				console.log('iconClick', val);
			},
			searchQuery(val) {
				console.log(val, 'searchQuery');
				if (val) {
					if (this.current === 0) {
						this.list = this.list.filter(item => {
							return item.vin.includes(val)
						})
					} else {
						this.olist = this.olist.filter(item => {
							return item.vin.includes(val)
						})
					}
				}

			},
			clearQuery() {
				if (this.current === 0) {
					this.list = this.list2
				} else {
					this.olist = this.olist2
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.car-list {
		.header-nav {
			padding: 20rpx 0;
			background-color: #ffffff;

			.search {
				padding: 0 20rpx;
				margin-top: 10rpx;
			}

			.tabs {
				padding: 0 20rpx;
			}
		}



		.content {
			padding: 20rpx;
			max-height: calc(100vh - 220rpx);
		}
	}
</style>